<template>
  <entity-view
    form-item-width="33.33%"
    @submit="submit"
    ref="form"
    :model="beanInfo"
    :rules="rules"
  >
    <div class="subtitle">费率信息管理</div>
    <div class="sub-content-flex">
      <form-item
        label="费率模板代码"
        v-model="beanInfo.feeCd"
        prop="feeCd"
        inputType="select"
        :options="feeCdList"
        @search="getFeeCdList"
        @change="value=>feeChange(value,'feeCd')"
      ></form-item>
      <form-item
        label="费率名称"
        v-model="beanInfo.feeName"
        prop="feeName"
        :options="feeCdList"
        @change="value=>handleChange(value,'feeName')"
        disabled
      ></form-item>
      <form-item
        label="费率描述"
        v-model="beanInfo.feeDesc"
        prop="feeDesc"
        :options="feeCdList"
        @change="value=>handleChange(value,'feeDesc')"
        disabled
      ></form-item>
      <form-item
        label="费率使用场景"
        v-model="beanInfo.feeScene"
        prop="feeScene"
        inputType="select"
        :options="feeSceneList"
        @change="(value) => handleChange(value, 'feeScene')"
      ></form-item>
    </div>
<!--    :options="[{label:22,value: 11}]"-->

    <div class="sub-content-block">
      <a-table
        :columns="columns"
        :dataSource="list"
        :rowKey="
          (record, index) => {
            return index;
          }
        "
        :scroll="{ x: 1000 }"
      ><template slot="operation" slot-scope="text, record">
          <a class="text-btn" @click="edit(record)">修改</a>
          <a
            class="text-btn"
            v-if="record.supportFlag === 'Y'"
            @click="cancel(record)"
            >停用</a
          >
          <a class="text-btn" v-else @click="cancel(record)">启用</a>
          <a class="text-btn" @click="view(record)">详情</a>
        </template>
      </a-table>
    </div>
    <div class="btn-wrapper">
      <a-button type="primary" html-type="submit" @click="goUpdateOne(preOne)"
        >上一步</a-button
      >
      <a-button @click="close">取消</a-button>
    </div>
  </entity-view>
</template>

<script>
import EntityView from "../../../../components/common/entityView/EntityView";
import FormItem from "../../../../components/common/entityView/FormItem";
import moment from "moment";
moment.locale("zh-cn");

export default {
  name: "FeeInfoForm",
  components: { EntityView, FormItem },
  inject: ["PDstChannelContext", "operationContext","TradeInfoFormContext"],
  data: function () {
    return {
      modalVisible: false,
      modalTitle: "",
      list: [],
      beanInfo: {},
      operatorType: "",
      preOne: "limitInfo",
      rules: {
        feeCd : [{ required: true, message: "必填", trigger: "blur" }],
        feeName : [{ required: true, message: "必填", trigger: "blur" }],
        feeDesc : [{ required: true, message: "必填", trigger: "blur" }],
      },
      feeCdList:[],
      feeSceneList: [
        { value: 0, name: "单日交易累计金额计费" },
        { value: 1, name: "单笔交易计费" },
      ],
      pagination: {
        pageSizeOptions: ["10", "20", "30", "40", "100"],
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: (total, range) =>
          `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`,
      },
      columns: [
        {
          title: "分段开始值",
          dataIndex: "pStartValue",
          fixed: "left",
          width: 120,
        },
        {
          title: "分段结束值",
          dataIndex: "pEndValue",
          width: 120,
        },
        {
          title: "分段计算方式",
          dataIndex: "pCalType",
          width: 180,
          customRender: (text, row, index) => {
            return text
              ? {
                  1: "按比例",
                  2: "按固定金额",
                  3: "按比例+封顶值",
                }[text]
              : "";
          },
        },
        {
          title: "分段比率",
          dataIndex: "pFeeRate",
          width: 200,
        },
        {
          title: "分段比率封顶值",
          dataIndex: "pFeeRateMax",
          width: 200,
        },
        {
          title: "分段固定值",
          dataIndex: "pValue",
          width: 200,
        },
        // {
        //   title: "操作",
        //   fixed: "right",
        //   scopedSlots: { customRender: "operation" },
        // },
      ],
    };
  },
  methods: {
    close(){
      this.TradeInfoFormContext.modalVisible=false;
    },
    async getPageInfo(beanInfo) {

      try {
        const res = await this.$get("/admin/fee/feeInfo/editFromChnlTxn", {
          dstChannelId: beanInfo.dstChannelId,
          instId: beanInfo.instId,
          optFlag: "upd",
          chnlOptFlag: "upd",
          channelTxn: beanInfo.channelTxn,
        });
        this.beanInfo = res.data || {};
      } catch (e) {
        console.error(e);
      }
    },
    async getFeeCdList(){
      const res = await this.$get("/admin/fee/feeInfo/feeCdSelect2List",{
        q: encodeURIComponent(`&${this.beanInfo.instId}`),
      });
      if (res.status === 200) {
        this.feeCdList = res.data.results.map(i => {
          this.beanInfo.feeCd = i.feeCd
          this.beanInfo.feeName =i.name
          this.beanInfo.feeDesc=i.feeDesc
          i.value = i.id
          return i
        })
      }
    },
    async getList() {
      try {
        console.log(this.beanInfo);
        const res = await this.$get("/admin/fee/feeInfo/getFeeByDstChnl", {
          instId: this.PDstChannelContext.beanInfo.instId,
          feeCd: this.beanInfo.feeCd,
        });
        this.list = res.data.data.feeList || [];

      } catch (e) {
        console.error(e);
      }
    },
    handleChange(value, param) {
      this.beanInfo[param] = value;
    },
    async feeChange(value, param) {
      this.beanInfo[param] = value;
     await this.getList();
    },
    resetFields() {
      return this.$refs.form.resetFields();
    },
    goUpdateOne(param) {
      this.operationContext.tabActiveKey = param;
    },
    openModal(type = "update", beanInfo) {
      this.modalTitle = {
        edit: "编辑",
        view: "详情",
      }[type];
      this.modalVisible = true;
      this.$nextTick(() => {
        this.$refs.modalForm.setOperatorType(type);
        if (type === "edit" || type === "view") {
          this.$refs.modalForm.setBeanInfo(beanInfo, this.beanInfo.instId);
        }
        this.$refs.modalForm.resetFields();
      });
    },
    async edit(item) {
      this.openModal("edit", item);
    },
    view(item) {
      this.openModal("view", item);
    },
    async cancel(item) {
      await this.$post("/admin/igas/pDstTxnAuthCfg/changeStatus", {
        chnlOptFlag: "upd",
        instId: this.beanInfo.instId,
        dstChannelId: this.PDstChannelContext.beanInfo.dstChannelId,
        channelTxn: this.beanInfo.channelTxn,
        msgDstId: this.beanInfo.msgDstId,
        optFlag: this.beanInfo.supportFlag === "N" ? "use" : "stop",
        supportFlag: this.beanInfo.supportFlag === "N" ? "Y" : "N",
      }).then((res) => {
        if (res.status === 200) {
          this.$message.success("操作成功！");
          this.pagination.defaultCurrent = 1;
          this.getList();
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    async submit(e) {
      e && e.preventDefault && e.preventDefault();
      const res = await this.$refs.modalForm.submit();
      if (res) {
        this.modalVisible = false;
        this.pagination.defaultCurrent = 1;
        await this.getList();
      }
    },
  },
  async mounted() {
    // await this.getList();
    await this.getPageInfo();
    this.operatorType = this.operationContext.operatorType;
  },
  created() {
    // console.log("111");
    // this.getList();
  },
};
</script>

<style scoped>
.btn-wrapper {
  padding: 0 10px;
  width: 100%;
  text-align: center;
}
.subtitle {
  width: 100%;
  font-size: 16px;
  margin-bottom: 10px;
  padding: 0 10px;
}

.sub-content-flex {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.sub-content-block {
  display: block;
  flex-wrap: wrap;
  width: 100%;
  padding: 0 10px;
}
.checkAll {
  display: block;
  line-height: unset;
}
</style>
